<template>
    <div :class="[{ mask: true, active: props.active }]" @click="setUserActive(false)">
        <div :class="[{ window: true, active: props.active }]">
            <div class="inf">
                <div class="userName">
                    <img src="@/assets/icons/avatarBEE.svg">
                    <div>{{ userInf?.name }}</div>
                </div>
                <div class="detailMsg">
                    <div class="userPhone"><span class="key">电话：</span>{{ userInf?.phone }}</div>
                    <div class="userAdress"><span class="key">地址：</span>{{ userInf?.address }}</div>
                </div>
                <div class="orders">
                    <div class="title">正在进行中的订单</div>
                    <div class="ingOrders">
                        <div class="orderItem" @click="goLogistics">
                            <img class="productImg"
                                src="https://static.mcake.com//uploads/2024/11/26/92ac235b7e404f4cd02e097252233a9c04d54faa.jpg" />
                            <div class="orderInf">
                                <div class="productNames">蔓越莓红丝绒</div>
                                <div class="logistics">已到达温州</div>
                            </div>
                            <img class="goLog" src="@/assets/rightArrow.svg" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.mask {
    position: fixed;
    top: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1001;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;

    &.active {
        opacity: 1;
        visibility: visible;
    }

    .window {
        transition: all 0.3s ease-in-out;
        position: fixed;
        top: 0;
        right: -20vw;
        height: 100vh;
        width: 20vw;
        padding: 20px;
        background-color: #ffffff;
        z-index: 1002;
        box-sizing: border-box;

        &.active {
            right: 0;
        }

        .inf {

            .userName {
                padding-top: 20px;
                background-color: #f9f9f9;
                display: flex;
                font-size: 30px;
                gap: 10px;
                border-top-right-radius: 20px;
                border-top-left-radius: 20px;
                box-shadow: -2px 21px 22px rgba(0, 0, 0, 0.4);

                img {
                    margin-left: 10px;
                    border-radius: 50%;
                    border: white solid 2px;
                    height: 50px;
                    width: 50px;
                }
            }

            .detailMsg {
                background-color: #f9f9f9;
                padding: 20px;

                .key {
                    font-size: 16px;
                    color: #999999;
                }

                .userPhone {
                    font-size: 20px;
                }

                .userAdress {
                    font-size: 20px;
                }
            }

        }

        .orders {
            margin-top: 40px;
            background-color: #f9f9f9;
            padding: 20px;

            .title {}

            .orderItem {
                display: flex;
                align-items: center;
                gap: 20px;
                border: 1px solid #e5e5e5;
                padding: 10px;

                .productImg {
                    height: 100px;
                    width: 100px;
                    border-radius: 10px;
                }

                .orderInf {
                    .productNames {
                        font-size: 20px;
                    }

                    .logistics {
                        font-size: 16px;
                        color: #999999;
                    }
                }

                .goLog {
                    height: 20px;
                    width: 20px;
                }
            }

        }
    }


}
</style>

<script setup>
import { inject, ref } from 'vue'
import { useUserStore } from '@/stores/user';
import { useRouter } from 'vue-router'
const router = useRouter()
const userStore = useUserStore()
const { setUserActive } = inject('userActive')
const props = defineProps({
    active: {
        type: Boolean,
        default: false
    }
})
const userInf = ref(userStore.user)

const goLogistics = (id) => {
    console.log(id);

    setUserActive(false)
    //等用户窗口收回后再跳转
    setTimeout(() => {
        router.push({ path: '/logistics', query: { id: 1 } })
    })
}
</script>